<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#tab{
				border: solid 2px darkcyan;
				width: 600px;
				border-collapse: collapse;
				margin: 20px auto;
			}
			#tab tr,
			#tab tr th,
			#tab tr td{
				border: solid 2px darkcyan;
				text-align: center;
			}
			table#tab tr td a{
				font-size: 12px;
				cursor: pointer;
			}
			#edit{
				color: #0000FF;
			}
			#delete{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<table id="tab">
				<thead id="thead">
					<tr>
						<th>ID</th>
						<th>姓名</th>
						<th>学号</th>
						<th>成绩</th>
						<th>等级</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">
					<tr>
						<td>1</td>
						<td>小米</td>
						<td>202001</td>
						<td>99</td>
						<td>A</td>
						<td>
							<a href="#" id="edit">编辑</a> /
							<a href="#" id="delete">删除</a>
						</td>
					</tr>
				</tbody>
				
			</table>
		</div>
		<script type="text/javascript">
			var arr=[
				{id:1,name:"小米",num:202001,fraction:99,grade:"A"},
				{id:2,name:"小凯",num:202002,fraction:55,grade:"E"},
				{id:3,name:"小桥",num:202003,fraction:93,grade:"A"},
				{id:4,name:"小博",num:202004,fraction:61,grade:"D"},
				{id:5,name:"小薇",num:202005,fraction:81,grade:"B"}
			]
			var tbody=document.getElementById("tbody");
			tbody.innerHTML="";
			var str="";
			for (var i=0;i<arr.length;i++) {
				var tr="<tr>"+
						"<td>"+arr[i].id+"</td>"+
						"<td>"+arr[i].name+"</td>"+
						"<td>"+arr[i].num+"</td>"+
						"<td>"+arr[i].fraction+"</td>"+
						"<td>"+arr[i].grade+"</td>"+
						"<td>"+
							"<a href='#' id='edit' onclick=myEdit("+JSON.stringify(arr[i])+")>编辑</a>"+" /"+
							"<a href='#' id='delete' onclick=myDelete("+arr[i].id+")>删除</a>"+
						"</td>"+
					"</tr>"
					str+=tr;
			}
			tbody.innerHTML=str;
			function myEdit(obj) {
				console.log("你要编辑的数据是:",obj)
			}
			function myDelete(id){
				console.log("你要删除的数据id是:",id);
			}
		</script>
	</body>
</html>
